import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {formatDate, getRealSize} from '../../utils';

class StateMessage extends React.PureComponent {
  render() {
    const {title, date, state} = this.props;
    return (
      <View style={Styles.container}>
        <View style={Styles.box}>
          <View style={Styles.head}>
            <Text style={Styles.title}>{title}</Text>
            <Text style={Styles.time}>
              {formatDate(date, 'YYYY-MM-DD HH:mm')}
            </Text>
          </View>
          <View style={Styles.content}>
            <View />
            <Text style={Styles.state}>{state}</Text>
          </View>
        </View>
      </View>
    );
  }
}

export default StateMessage;

const Styles = StyleSheet.create({
  container: {
    marginVertical: getRealSize(4),
  },
  box: {
    marginHorizontal: getRealSize(48),
    flex: 1,
    backgroundColor: 'white',
    borderRadius: getRealSize(4),
    paddingHorizontal: getRealSize(15),
    paddingVertical: getRealSize(12),
  },
  head: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    flex: 1,
    fontSize: getRealSize(14),
    fontWeight: 'bold',
    color: '#333',
  },
  time: {
    width: getRealSize(120),
    textAlign: 'right',
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  state: {
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
  },
});
